Google Charts API-এ Chart Style এবং Layout Customization ব্যবহার করে আপনি চার্টের বিভিন্ন দিক কাস্টমাইজ করতে পারেন, যেমন রঙ, টাইটেল, অক্ষ (axis), লেজেন্ড, টুলটিপ, সাইজ এবং আরও অনেক কিছু। এই কাস্টমাইজেশনগুলি আপনার ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকরী এবং আকর্ষণীয় করে তোলে।
Chart Style কাস্টমাইজেশন দ্বারা আপনি চার্টের বিভিন্ন উপাদান যেমন রঙ, ফন্ট, গ্রিডলাইন, অক্ষের স্টাইল ইত্যাদি কাস্টমাইজ করতে পারেন।
চার্টের টাইটেল পরিবর্তন করতে এবং সেটির স্টাইল কাস্টমাইজ করতে title অপশন ব্যবহার করা হয়।
chartOptions = {
title: 'My Daily Activities', // Title
titleTextStyle: {
color: 'blue', // Title text color
fontSize: 18, // Title text size
bold: true, // Title text weight
italic: true // Title text style
}
};
চার্টের আকার পরিবর্তন করতে আপনি width এবং height অপশন ব্যবহার করতে পারেন।
chartOptions = {
width: 600, // Chart width
height: 400 // Chart height
};
চার্টের লেজেন্ডের পজিশন এবং স্টাইল কাস্টমাইজ করতে legend অপশন ব্যবহার করা হয়।
chartOptions = {
legend: {
position: 'top', // Legend position: top, bottom, left, right
alignment: 'center', // Legend alignment: start, center, end
textStyle: {
color: 'black', // Legend text color
fontSize: 14, // Legend text size
fontName: 'Arial' // Legend text font
}
}
};
চার্টের বিভিন্ন উপাদানের রঙ কাস্টমাইজ করতে colors অপশন ব্যবহার করা হয়। এটি একাধিক রঙ গ্রহণ করতে পারে।
chartOptions = {
colors: ['#FF5733', '#33FF57', '#3357FF'] // Chart colors
};
চার্টের উপর হোভার করার সময় tooltip প্রদর্শিত হয়। টুলটিপের কন্টেন্ট এবং স্টাইল কাস্টমাইজ করা যায়।
chartOptions = {
tooltip: {
trigger: 'focus', // Tooltip trigger: focus, selection
isHtml: true, // Enable HTML in tooltip
textStyle: {
color: 'black',
fontSize: 14
}
}
};
hAxis (horizontal axis) এবং vAxis (vertical axis) কাস্টমাইজ করার মাধ্যমে আপনি অক্ষের টাইটেল, লেবেল, গ্রিডলাইন এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন।
chartOptions = {
hAxis: {
title: 'Time', // Horizontal axis title
minValue: 0, // Minimum value for horizontal axis
textStyle: {
color: 'green', // Axis text color
fontSize: 12 // Axis text font size
},
gridlines: {
color: 'lightgrey', // Gridlines color
count: 5 // Number of gridlines
}
},
vAxis: {
title: 'Sales', // Vertical axis title
textStyle: {
color: 'red', // Axis text color
fontSize: 14 // Axis text font size
}
}
};
চার্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে backgroundColor অপশন ব্যবহার করা হয়।
chartOptions = {
backgroundColor: '#f2f2f2' // Background color of the chart
};
অনেক ধরনের চার্টে 3D ভিউ তৈরি করা যায়। যেমন, PieChart, ColumnChart, BarChart-এ 3D কাস্টমাইজেশন করা যেতে পারে।
chartOptions = {
is3D: true, // Enable 3D for the chart
view: { min: 0, max: 10 }
};
Chart Layout কাস্টমাইজেশন দ্বারা আপনি চার্টের আঙ্গিক, অক্ষের বিন্যাস, এবং অন্যান্য উপাদান কাস্টমাইজ করতে পারেন।
গ্রিডলাইনগুলোকে কাস্টমাইজ করতে gridlines অপশন ব্যবহার করা হয়, যা চার্টের অক্ষের গ্রিডের জন্য উপযুক্ত।
chartOptions = {
hAxis: {
gridlines: {
count: 4, // Set the number of gridlines
color: '#e5e5e5', // Set gridline color
width: 0.5 // Set gridline width
}
},
vAxis: {
gridlines: {
color: '#e5e5e5',
width: 0.5
}
}
};
চার্টের টাইটেল এবং লেজেন্ডের পজিশন এবং এলাইনমেন্ট নিয়ন্ত্রণ করা যায়।
chartOptions = {
title: 'Sales Overview',
titlePosition: 'in', // 'in' or 'out' for title inside or outside the chart
titleTextStyle: {
fontSize: 16,
color: '#000',
bold: true
},
legend: {
position: 'bottom',
alignment: 'center' // Align legend text to center
}
};
নিচে একটি Pie Chart উদাহরণ দেওয়া হলো, যেখানে বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহৃত হয়েছে।
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Customized Google Chart';
chartType = 'PieChart'; // Chart Type
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]; // Chart Data
chartOptions = {
title: 'My Daily Activities', // Title
titleTextStyle: {
color: 'blue', // Title text color
fontSize: 18, // Title font size
bold: true // Title bold
},
pieHole: 0.4, // Doughnut Style
width: 600,
height: 400,
colors: ['#FF5733', '#33FF57', '#3357FF'], // Custom Colors
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: 'black', // Legend text color
fontSize: 14 // Legend font size
}
},
tooltip: {
trigger: 'focus', // Tooltip trigger
isHtml: true, // Enable HTML in tooltip
textStyle: {
color: 'black',
fontSize: 14
}
}
};
}
HTML:
<h1>{{ title }}</h1>
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
Google Charts API-তে Chart Style এবং Layout Customization আপনাকে আপনার চার্টকে কাস্টমাইজ করার পুরো স্বাধীনতা দেয়। আপনি title, legend, colors, axis, gridlines, এবং অন্যান্য অপশন কাস্টমাইজ করে চার্টের স্টাইল এবং লেআউট পরিবর্তন করতে পারেন। এই কাস্টমাইজেশন আপনার ডেটা ভিজুয়ালাইজেশনকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
